<template>
  <header id="header" class="header">
    <div class="head_top_wrap">
      <div class="head_top flex">
        <div>
          欢迎来到睿那体育官网
        </div>
        <div class="login_wrap flex" v-if="!hasInfo">
          <span class="login lan"><span @click="toLogin('login')">登录</span></span>
          <span class="line"></span>
          <span class="register"><span @click="toLogin('register')">注册</span></span>
        </div>
        <div class="user_info_wrap" v-else>
          <div class="user_ioc_wrap" @click="toLogin('user')">
            <span class="user_head_img">
              <img :src="userInfo.userImg" alt="">
            </span>
            <span class="user_info_name">{{userInfo.userName}}</span>
          </div>
          <div @click="toLogin('login')">【切换账号】</div>
        </div>
      </div>
    </div>
    <div class="head_nav flex">
      <h1>
        <img src="../assets/images/logo.png" alt="">
      </h1>
      <nav class="nav">
        <ul class="flex navlist">
          <li><router-link :to="{ path: '/'}">首页</router-link></li><!--
        --><li><router-link :to="{ path: 'about'}">关于我们</router-link></li><!--
        --><li><router-link :to="{ path: 'sch'}">世界冠军进校园</router-link></li><!--
        --><li><router-link :to="{ path: 'match'}">"冠军联盟杯"赛事</router-link></li><!--
        --><li><router-link :to="{ path: 'platform'}">羽学堂020平台</router-link></li><!--
        --><li><a :href="GLOBAL.SHOP_RNTY_URL">睿那商城</a></li><!--
        --><li><router-link :to="{ path: 'forum' }">睿那论坛</router-link></li><!--
        --><li><router-link :to="{ path: 'news' }">睿那新闻</router-link></li>
        </ul>
      </nav>
    </div>
  </header><!-- /header -->
</template>
<script>
export default {
  name:"headContainer",
  data(){
    return{
      hasInfo:false,
      userInfo:{
        userImg:'',
        userName:''
      }
    }
  },
  methods:{
    toLogin(path){
      this.GLOBAL.authLogin(path)
    },
  },
  mounted(){
    //用户信息
    let username = this.$cookie.get("rnty_username");
    let userimg = this.$cookie.get("rnty_userimg");
    let token = this.$cookie.get("rnty_access_token")
    if(token){//token存在，登陆过
      if(username&&userimg){//需展示内容存在
        this.userInfo.userImg = userimg;
        this.userInfo.userName = username
      }else{//需展示内容缺少
        this.GLOBAL.tokenRequest({
          baseURL:this.GLOBAL.API_ACCOUNT_RNTY_URL,
          url:'users/info'
        }).then(({data:data})=>{
          this.$cookie.set("rnty_username", data.username, { domain: '.ruinatiyu.com'});
          this.$cookie.set("rnty_userimg",data.headImg,{ domain: '.ruinatiyu.com'});
          this.userInfo.userImg = data.headImg;
          this.userInfo.userName = data.username
        })
      }
      this.hasInfo = true;
    }else{//没登录过
      this.hasInfo = false;
      return;
    }
  }
}
</script>

<style scoped>
.header {
  height: 116px;
  width: 100%;
  position: fixed;
  z-index: 999;
  left: auto;
  top: 0;
  background-color: #fff;
}
.head_top_wrap {
  background-color: #f9f9f9;
  font-size: 14px;
  color: #999;
}
.head_top {
  height: 40px;
  width: 1200px;
  margin: 0 auto;
}
.head_nav {
  height: 86px;
  width: 1200px;
  margin: 0 auto;
}
.login_wrap span {
  cursor: pointer;
}
.navlist li a {
  padding: 0 18px;
  font-size: 16px;
  color: #666;
}
.login_wrap .login{
  color:#0078c5;
}
.user_head_img{
  width:40px;
  height:40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.user_head_img img{
  width:40px;
  height:40px;
}
.user_info_wrap{
  cursor: pointer;
  width:250px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.user_ioc_wrap{
  display: flex;
  width:82px;
  justify-content: space-between;
  align-items: center;
}
</style>

